<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>CdSelector example -- double underscore</title>
    <link rel="stylesheet" type="text/css" href="../example.css" />
    <link rel="stylesheet" type="text/css" href="./cdselector.css" />
</head>
<body>
<div id="doc4">

  <div class="hd">
    <div class="logo" style="float:left;"><a href="http://code.google.com/p/double-underscore/" target="_blank"><img src="http://stauren.net/misc/images/bullhead.gif" /></a></div>
    <div class="hd-title">CdSelector widget example:</div>
    <div>
      <a href="http://code.google.com/p/double-underscore/">Project home</a>&nbsp;
      <a href="http://code.google.com/p/double-underscore/w/list">More docs </a>
    </div>
  </div>
  <!-- start:bd -->

  <div class="hd">
  <h1>Loading cdselector widget</h1>
<pre>
&lt;script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"&gt;&lt;/script&gt;
//WARNING: loader.js in trunk is not stable, should always use the newest loader in pkgs
&lt;script&gt;
__.load('cdselector', function() {

  //init cdselector in onload callback

});
</pre>
    <h1>Date selector</h1>
    <div id="container0"></div>
    <div>Param 0: container id, <br>Param 1: data source object or a date string<br>Param 2: cascade level<br>Param 3: render mode, 1 or 2<br>Param 4: onChange callback<br>Param 5: allow empty array</div>
<pre>
var oDisObj0 = new __.widget.CdSelector(
  'container0', '1988-01-01', 3, 1,
  function(o, ar) {
    dolog('selected value: '+ ar.join('-'));
  },
  [true, true, false, true]
);
</pre>
    <h1>cdselector with custom data source</h1>
<pre>
  //using __.widget.data.Region as the data source
  var oDisObj1 = new __.widget.CdSelector(
    'container1',
    __.widget.data.Region,
    4,
    1,
    function(o, ar) {
      dolog('selected value: '+ ar.join('-'));
    },
    [true, true, false, true]
  );
</pre>
    <div id="container1"></div>
    <h1>RegionSelector with Chinese region data</h1>
<pre>
  var oDisObj1b = new __.widget.RegionSelector(
    'container1b', 4,
    {
      renderType : 1, //default 1
      afterChange : function(o, ar) {
        dolog('selected value: '+ ar.join('-'));
      },
      jsonName : 'testjn1b', //auto generated hidden input as selection result
      limitArray : [false, false, false, true] // allow '不限'
    }
  );
</pre>
    <div id="container1b"></div>
    <h1>list-style rendering mod and select method</h1>
    <div id="container2"></div>
    <div style="clear:both;"></div>
<pre>
  var oDisObj2 = new __.widget.RegionSelector(
    'container2', 3, {
       renderType : 2,
       afterChange : function(o, ar) {
         dolog('selected value: '+ ar.join('-') + ', level ' + level + ' is clicked');
       }
    }
  );

  //invoke select method
  oDisObj2.select('1231-1238-1240')
</pre>
  </div>
  <!-- end:bd -->
</div>

<script src="../example.js"></script>
<script src="http://double-underscore.googlecode.com/svn/trunk/src/loader/loader.js"></script>
<script>

__.addModule('cds-data-region', {
  dirName : 'cdselector'
});

__.load('core cdselector cds-data-region', function() {

  var oDisObj0 = new __.widget.CdSelector(
    'container0', '1988-01-01', 3, 1,
    function(o, ar) {
      dolog('selected value: '+ ar.join('-'));
    }
  );

  var oDisObj1 = new __.widget.CdSelector(
    'container1', __.widget.data.Region, 4, 1,
    function(o, ar) {
      dolog('selected value: '+ ar.join('-'));
    },
    [false, false, true, true]
  );

  var oDisObj1b = new __.widget.RegionSelector(
    'container1b', 4,
    {
      renderType : 1, //default 1
      afterChange : function(o, ar) {
        dolog('selected value: '+ ar.join('-'));
      }, //onchage 的回调函数
      jsonName : 'testjn1b', //自动生成json的名字
      limitArray : [false, false, false, true] // allow '不限'
    }
  );
  //oDisObj1.select('2591-2592-2595-0')

  var oDisObj2 = new __.widget.RegionSelector(
    'container2', 4, {
       renderType : 2,
       afterChange : function(level, ar) {
         dolog('selected value: '+ ar.join('-') + ', level ' + level + ' is clicked');
       }
    }
  );
  oDisObj2.select('1231-1238-1240')
});
</script>
</body>
</html>
